<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
    title: {
      type: String,
      default: "",
    },
    datas: {
      type: Array,
      default: function () {
        return [];
      },
    },
    radius: {
      type: Array,
      default: function () {
        return ["0%", "90%"];
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    width(n) {
      this.chart.resize({ width: n, height: this.height });
    },
    height(n) {
      this.chart.resize({ width: this.width, height: n });
    },
  },
  mounted() {
    // console.log(this.datas)
    this.initChart();
    console.log(this.width, this.height);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));

      this.chart.setOption({
        backgroundColor: "#fff",
        color: [
          "#5B8FF9",
          "#5AD8A6",
          "#E8684A",
          "#F6BD16",
          "#5D7092",
          "#9270CA",
          "#9270CA",
        ],
        title: {
          top: 20,
          text: this.title,
          x: "center",
          align: "right",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B",
            },
          },
        },
        legend: {
          show: false,
          top: 20,
          icon: "rect",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          right: "4%",
          textStyle: {
            fontSize: 12,
            color: "#F1F1F3",
          },
        },
        series: [
          {
            type: "pie",
            radius: "75%",
            center: ["50%", "60%"],
            smooth: true,
            // symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1,
              },
            },
            label: {
              normal: {
                formatter: "{b|{b}：}\n{per|{d}%}",
                rich: {},
              },
            },
            data: [
              { value: 335, name: "统计1" },
              { value: 310, name: "统计2" },
              { value: 234, name: "统计3" },
              { value: 135, name: "统计4" },
            ],
          },
        ],
      });
    },
  },
};
</script>
